<template>
    <PhonePreview>
        <div class="preview-list">
            <div v-for="item in previewList" :key="item.id" class="preview-item">
                <div class="user-title">
                    <img src="@renderer/assets/img/user.png" alt="" />
                </div>
                <div class="materials">
                    <component :is="getCom(item)" :materials-info="item" />
                </div>
            </div>
        </div>
    </PhonePreview>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted, onUnmounted, shallowRef, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import PhonePreview from '../index.vue';
import PhonePicture from './components/PhonePicture.vue';
import PhoneVideo from './components/PhoneVideo.vue';
import PhoneText from './components/PhoneText.vue';
import PhoneAudio from './components/PhoneAudio.vue';
import PhoneFile from './components/PhoneFile.vue';
import PhoneLink from './components/PhoneLink.vue';
import PhoneAward from './components/PhoneAward.vue';
import PhoneCollection from './components/PhoneCollection.vue';
import PhoneMiniPrograme from './components/PhoneMiniPrograme.vue';
import PhoneGoods from './components/PhoneGoods.vue';
import PhonePage from './components/PhonePage.vue';
import PhoneOfficialAccounts from './components/PhoneOfficialAccounts.vue';

// import bus from '@/utils/bus';

const content = ref<string>('');
const materials = ref<any[]>([]);

interface TabsType {
    icon: string;
    [propsName: string]: string | number;
    comName: InstanceType<typeof PhoneText>;
}

interface ConfigType {
    tabs: Array<TabsType>;
}

interface Props {
    reKey: string;
    user: string;
    data: string;
    materialContentData: Array<any>;
}

const props = withDefaults(defineProps<Props>(), {
    reKey: '',
    user: '张三',
    inputContentData: '',
    materialContentData: () => []
});

const config = reactive<ConfigType>({
    tabs: [
        {
            type: '0',
            icon: '/file/pic.png',
            name: '文本',
            comName: shallowRef(PhoneText)
        },
        {
            type: '1',
            icon: '/file/pic.png',
            name: '图片',
            comName: shallowRef(PhonePicture)
        },
        {
            type: '2',
            icon: '/file/mov.png',
            name: '视频',
            comName: shallowRef(PhoneVideo)
        },
        {
            type: '3',
            icon: '/file/link.png',
            name: '链接',
            comName: shallowRef(PhoneLink)
        },
        {
            type: '4',
            icon: '/file/mp3.png',
            name: '音频',
            comName: shallowRef(PhoneAudio)
        },
        {
            type: '5',
            icon: '/file/ysb.png',
            name: '文件',
            comName: shallowRef(PhoneFile)
        },
        {
            type: '6',
            icon: '/file/wbgg.png',
            name: '抽奖',
            comName: shallowRef(PhoneAward)
        },
        {
            type: '7',
            icon: '/file/shop.png',
            name: '商品素材',
            comName: shallowRef(PhoneGoods)
        },
        {
            type: '8',
            icon: '/file/shop.png',
            name: '页面素材',
            comName: shallowRef(PhonePage)
        },
        {
            type: '9',
            icon: '/file/form.png',
            name: '收集表',
            comName: shallowRef(PhoneCollection)
        },
        {
            type: '10',
            icon: '/file/official.png',
            name: '公众号图文',
            comName: shallowRef(PhoneOfficialAccounts)
        },
        {
            type: '11',
            icon: '/file/miniApp.png',
            name: '小程序素材',
            comName: shallowRef(PhoneMiniPrograme)
        }
    ]
});

const previewList = computed(() => {
    const content = {
        type: '0',
        icon: '/file/pic.png',
        name: props.data.text,
    };
    return [content, ...props.data.attachments];
});

const getCom = (item: any) => {
    return config.tabs.find(ite => ite.type == item.type)?.comName;
};


watchEffect(() => {
    content.value = props.inputContentData;
    materials.value = props.materialContentData;
});

</script>
<style lang="scss" scoped>
.preview-list {
    padding: 30px 0;

    .preview-item {
        width: 92%;
        margin: 2px auto -24px;

        .user-title {
            display: flex;
            align-items: center;

            img {
                width: 40px;
                height: 40px;
            }

            span {
                transform: translateY(-10px);
                margin-left: 6px;
                font-size: 12px;
                color: #bbb;
            }
        }

        .materials {
            width: 100%;
            transform: translateY(-38px);
            padding-left: 45px;
            box-sizing: border-box;
        }
    }
}
</style>
